<template>
  <div>
    <!-- 价值视图 -->
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="1" label="客户价值"></el-tab-pane>
      <div class="item_box">
        <p class="title_1 mb20">自身规模</p>
        <el-descriptions
          title=""
          :column="4"
          label-align="right"
          :border="true"
        >
          <el-descriptions-item label="注册资本" width="100" label-align="right">
            <span>50W</span>
          </el-descriptions-item>
          <el-descriptions-item label="员工人数" width="100" label-align="right">
            <span>50人</span>
          </el-descriptions-item>
          <el-descriptions-item label="下属企业数量" width="100" label-align="right">
            <span>100家</span>
          </el-descriptions-item>
          <el-descriptions-item label="是否500强企业" width="100" label-align="right">
            <span>国内500强</span>
          </el-descriptions-item>
        </el-descriptions>

        <p class="title_1 mb20 mt20">合作年限</p>
        <el-descriptions
          title=""
          :column="4"
          label-align="right"
          :border="true"
        >
          <el-descriptions-item label="当年有效客户" width="100" label-align="right">
            <span>是</span>
          </el-descriptions-item>
          <el-descriptions-item label="上年承保客户" width="100" label-align="right">
            <span>是</span>
          </el-descriptions-item>
          <el-descriptions-item label="连续承保年限" width="100" label-align="right">
            <span>3年</span>
          </el-descriptions-item>
          <el-descriptions-item label="累计承保年限" width="100" label-align="right">
            <span>10年</span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="mt20">
          <el-descriptions
            title=""
            :column="4"
            label-align="left"
            :border="true"
            direction="vertical"
          >
            <el-descriptions-item label="当年承保险种" width="150" label-align="left">
              <span>企财险、</span><span>意外险、</span><span>企财险、</span><span>意外险、</span><span>企财险、</span><span>意外险、</span><span>企财险、</span><span>意外险、</span><span>企财险、</span><span>意外险、</span><span>企财险、</span><span>意外险、</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div>
          <p class="title_1 mb20 mt20">保费规模</p>
          <el-row>
            <el-col :span="8">
              <el-checkbox-group v-model="checked0" @change="(val) => handleChange(0,val)">
                <el-checkbox-button :value="0" label="全部"></el-checkbox-button>
                <el-checkbox-button :value="1" label="车险"></el-checkbox-button>
                <el-checkbox-button :value="2" label="非车"></el-checkbox-button>
                <el-checkbox-button :value="3" label="农险"></el-checkbox-button>
              </el-checkbox-group>
            </el-col>
            <el-col :span="8">
              <el-checkbox v-model="checked" label="统计时是否包含下级企业" @change="(val) => handleChange(0,val)" />
            </el-col>
          </el-row>
          <el-row class="mt20 ml20" :gutter="20">
            <el-col :span="20">
              <el-table
                :data="dataList"
                border
                v-loading="loading0"
              >
                <el-table-column label="/" align="center" prop="title" :show-overflow-tooltip="true"/>
                <el-table-column label="本年累计保费" align="center" prop="num0" :show-overflow-tooltip="true"/>
                <el-table-column label="上年累计保费" align="center" prop="num1" :show-overflow-tooltip="true"/>
                <el-table-column label="近三年累计保费" align="center" prop="num2" :show-overflow-tooltip="true"/>
                <el-table-column label="历史累计保费" align="center" prop="num3" :show-overflow-tooltip="true"/>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div>
          <p class="title_1 mb20 mt20">赔付情况</p>
          <el-row>
            <el-col :span="8">
              <el-checkbox-group v-model="checked1" @change="(val) => handleChange(1,val)">
                <el-checkbox-button :value="0" label="全部"></el-checkbox-button>
                <el-checkbox-button :value="1" label="车险"></el-checkbox-button>
                <el-checkbox-button :value="2" label="非车"></el-checkbox-button>
                <el-checkbox-button :value="3" label="农险"></el-checkbox-button>
              </el-checkbox-group>
            </el-col>
            <el-col :span="8">
              <el-checkbox v-model="checked3" label="统计时是否包含下级企业" @change="(val) => handleChange(1,val)" />
            </el-col>
          </el-row>
          <el-row class="mt20 ml20" :gutter="20">
            <el-col :span="20">
              <el-table
                :data="dataList_1"
                border
                v-loading="loading1"
              >
                <el-table-column label="/" align="center" prop="title" :show-overflow-tooltip="true"/>
                <el-table-column label="本年(万元)" align="center" prop="num0" :show-overflow-tooltip="true"/>
                <el-table-column label="上年(万元)" align="center" prop="num1" :show-overflow-tooltip="true"/>
                <el-table-column label="近三年(万元)" align="center" prop="num2" :show-overflow-tooltip="true"/>
                <el-table-column label="历史(万元)" align="center" prop="num3" :show-overflow-tooltip="true"/>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="mt20 ml20" :gutter="20">
            <el-col :span="20">
              <el-table
                :data="dataList_2"
                border
                v-loading="loading1"
              >
                <el-table-column type="expand"></el-table-column>
                <el-table-column label="/" align="center" prop="title" :show-overflow-tooltip="true">
                  <template #default="scope">
                    <span>{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="本年(万元)" align="center" prop="num0" :show-overflow-tooltip="true"/>
                <el-table-column label="上年(万元)" align="center" prop="num1" :show-overflow-tooltip="true"/>
                <el-table-column label="近三年(万元)" align="center" prop="num2" :show-overflow-tooltip="true"/>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div>
          <p class="title_1 mb20 mt20">保单成本率</p>
          <el-row>
            <el-col :span="8">
              <el-checkbox-group v-model="checked2" @change="(val) => handleChange(2,val)">
                <el-checkbox-button :value="0" label="全部"></el-checkbox-button>
                <el-checkbox-button :value="1" label="车险"></el-checkbox-button>
                <el-checkbox-button :value="2" label="非车"></el-checkbox-button>
                <el-checkbox-button :value="3" label="农险"></el-checkbox-button>
              </el-checkbox-group>
            </el-col>
            <el-col :span="8">
              <el-checkbox v-model="checked4" label="统计时是否包含下级企业" @change="(val) => handleChange(2,val)" />
            </el-col>
          </el-row>
          <el-row class="mt20 ml20" :gutter="20">
            <el-col :span="20">
              <el-table
                :data="dataList_3"
                border
                v-loading="loading2"
              >
                <el-table-column label="/" align="center" prop="title" :show-overflow-tooltip="true">
                  <template #default="scope">
                    <span>{{ scope.row.title }}</span> <el-icon><QuestionFilled /></el-icon>
                  </template>
                </el-table-column>
                <el-table-column label="本年(%)" align="center" prop="num0" :show-overflow-tooltip="true"/>
                <el-table-column label="上年(%)" align="center" prop="num1" :show-overflow-tooltip="true"/>
                <el-table-column label="近三年(%)" align="center" prop="num2" :show-overflow-tooltip="true"/>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script setup name="valueView">
import { reactive, ref, toRefs } from "vue"

  const activeName = ref('1')
  const loading0 = ref(false)
  const loading1 = ref(false)
  const loading2 = ref(false)
  const checked0 = ref([])
  const checked1 = ref([])
  const checked2 = ref([])
  const checked = ref(false)
  const checked3 = ref(false)
  const checked4 = ref(false)
  const dataList = ref([
    {
      title: '入账保费(万元)',
      num0: '12',
      num1: '50',
      num2: '150',
      num3: '550',
    },
    {
      title: '签单保费(万元)',
      num0: '12',
      num1: '45',
      num2: '135',
      num3: '520',
    },
    {
      title: '起保保费(万元)',
      num0: '20',
      num1: '60',
      num2: '170',
      num3: '650',
    },
  ])
  const dataList_1 = ref([
    {
      title: '赔款支出',
      num0: '12',
      num1: '50',
      num2: '86.5',
      num3: '135.89',
    },
  ])
  const dataList_2 = ref([
    {
      title: '保单赔付率',
      num0: '12.09',
      num1: '16.2',
      num2: '17.23',
      num3: '135.89',
    },
    {
      title: '非车险类：企财险',
      num0: '12.33',
      num1: '23.6',
      num2: '26.5',
      num3: '135.89',
    },
    {
      title: '非车险类：家财险',
      num0: '19',
      num1: '27.1',
      num2: '16',
      num3: '135.89',
    },
    {
      title: '非车险类：船舶险',
      num0: '12',
      num1: '38',
      num2: '13.6',
      num3: '16.78',
    },
  ])
  const dataList_3 = ref([
    {
      title: '预期赔付率',
      num0: '8.11',
      num1: '9.99',
      num2: '15.01',
    },
    {
      title: '销售费用率',
      num0: '12.52',
      num1: '10.82',
      num2: '17.23',
    },
    {
      title: '其他变动费用率',
      num0: '12.67',
      num1: '18.2',
      num2: '20.9',
    },
    {
      title: '固定费用率',
      num0: '12.21',
      num1: '10.8',
      num2: '15.1',
    },
    {
      title: '保单变动成本率',
      num0: '13.76',
      num1: '11.91',
      num2: '12.55',
    },
    {
      title: '保单成本率',
      num0: '12.45',
      num1: '8.89',
      num2: '15.23',
    },
  ])
  const handleClick = (tab) => {

  }
  const handleChange = (typ, val) => {
    if (typ == 0) {
      loading0.value = true
    } else if (typ == 1) {
      loading1.value = true
    } else {
      loading2.value = true
    }
    setTimeout(() => {
      loading0.value = false
      loading1.value = false
      loading2.value = false
    }, 500);
  }
</script>
<style lang="scss" scoped>
</style>
